<template>
	<view>
		<!-- 遮罩层 -->
		<view v-if="modelValue" class="mask" @click="handleClose"></view>

		<!-- 弹出内容 -->
		<view class="modal" :class="{ show: modelValue }">
			<slot></slot>
		</view>
	</view>
</template>

<script setup lang="ts">

import { defineProps, defineEmits } from 'vue'


	const props = defineProps({
		modelValue: Boolean // 用于 v-model 绑定显示状态
	})

	const emit = defineEmits(['update:modelValue'])

	const handleClose = () => {
		emit('update:modelValue', false)
	}



</script>

<style scoped lang='scss'>
	*{
		box-sizing: border-box;
	}
	.mask {
		position: fixed;
		z-index: 999;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.4);
	}

	.modal {
		position: fixed;
		z-index: 1000;
		left: 0;
		bottom: -100%;
		width: 100%;
		max-height: 80%;
		background: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		transition: bottom 0.3s ease;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.modal.show {
		bottom: 0;
	}
</style>